﻿<html lang="ja">
<head>
    <style>
        body {
            font-family: Helvetica, Arial, sans-serif;
        }
    </style>
</head>

<body>
    <h1> JSウィジェット組み込みデモ</h1>
    <table border="1" width="80%">
        <tr>
            <th>会社名</th>
            <th>氏名</th>
            <th>部署</th>
            <th>連絡先</th>
        </tr>
        <tr>
            <td>株式会社RevComm</td>
            <td>山田 太郎</td>
            <td>営業部</td>
            <!--クリックコール 090XXXXXXXXを実際の電話番号に置き換えてご利用ください。-->
            <td><a href="javascript:miitelWidget.call('090XXXXXXXX');">090XXXXXXXX</a></td>
        </tr>
        <tr>
            <td>株式会社RC</td>
            <td>矢野 次郎</td>
            <td>法人営業部</td>
            <!--クリックコール 090XXXXXXXXを実際の電話番号に置き換えてご利用ください。-->
            <td><a href="#" onclick="outboundCall2('090XXXXXXXX')">090XXXXXXXX</a></td>
        </tr>
    </table><br />

    <h4>発信可否</h4>
    <p>
        State: <span id="readyState">false</span>
    </p>

    <h4>応対履歴の固有ID（シーケンスID）</h4>
    <p>
        Sequence ID: <span id="sequenceId"></span>
    </p>

    <h4>発信</h4>
    <p>
        電話番号<input type="text" id="outboundPhoneNumber" />
        会社名<input type="text" id="outboundCompanyName" />
        担当者名<input type="text" id="outboundContactPersonName" />
        <button onClick="outboundCall()">発信</button>
    </p>

    <h4>通話終了</h4>
    <p>
        <button onClick="hangUpFunc()">電話を切る</button>
    </p>

    <h4>着信情報</h4>
    <ul>
        <li>発信元電話番号 (内線の場合は、内線番号)：<span id="incomingPhoneNumber"></span></li>
        <li>着信先グループ名：<span id="incomingGroupName"></span></li>
        <li>着信先ユーザ名：<span id="incomingUserName"></span></li>
        <li>着信先回線名：<span id="incomingCircuitTitle"></span></li>
        <li>着信先電話番号：<span id="incomingCircuitNumber"></span></li>
        <li>内線かどうか：<span id="incomingIsInternal"></span></li>
        <li>内線転送かどうか：<span id="incomingIsTransfer"></span></li>
        <li>転送元電話番号（内線転送の場合のみ）：<span id="incomingRemotePhoneNumber"></span></li>
    </ul>
    <!--MiiTel Analyticsの管理画面からJavaScript連携にアクセスして、コピーしてご利用ください。https://support.miitel.jp/hc/ja/articles/360030159052 -->
    <!-- begin miitel widget  -->
    <script>
        window.miitelWidget = window.miitelWidget || function (k, v) { miitelWidget.conf = miitelWidget.conf || {}; miitelWidget.conf[k] = v; }
        miitelWidget("company_id", "XXXXXXXX");
        miitelWidget("access_key", "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx");
    </script>
    <script async src="https://api.miitel.jp/static/widget/v1.js"></script>
    <!-- end miitel widget  -->
    <!--MiiTel Analyticsの管理画面からのコピーはここまで。-->

    <script>
        // 架電イベント　入力発信
        function outboundCall() {
            var phoneNumber = document.getElementById("outboundPhoneNumber").value;
            var companyName = document.getElementById("outboundCompanyName").value;
            var contactPersonName = document.getElementById("outboundContactPersonName").value;
            miitelWidget.call(phoneNumber, { contact: { companyName, contactPersonName} });
        }

        // 架電イベント2 クリックtoコール
        function outboundCall2(phoneNumber) {
            miitelWidget.call(phoneNumber);
        }

        // 通話終了イベント
        function hangUpFunc(){
            miitelWidget.hangup();
        }

        // 着信パラメータの取得イベント
        function displayPhoneNumber(e) {
            console.log("displayPhoneNumber");
            console.log(e);
            document.getElementById("incomingPhoneNumber").innerHTML = e.phoneNumber;
            document.getElementById("incomingGroupName").innerHTML = e.groupName;
            document.getElementById("incomingUserName").innerHTML = e.userName;
            document.getElementById("incomingCircuitTitle").innerHTML = e.circuitTitle;
            document.getElementById("incomingCircuitNumber").innerHTML = e.circuitNumber;
            document.getElementById("incomingIsInternal").innerHTML = e.isInternal;
            document.getElementById("incomingIsTransfer").innerHTML = e.isTransfer;
            document.getElementById("incomingRemotePhoneNumber").innerHTML = e.remotePhoneNumber;
        }
        miitelWidget("onReceiveCall", displayPhoneNumber);

        // ステータス更新イベント
        function updateReadyState(e) {
            console.log("updateReadyState")
            document.getElementById("readyState").innerHTML = e.state;
        }
        miitelWidget("onChangeReadyState", updateReadyState);

        // 応対履歴の固有ID（シーケンスID）取得イベント
        function receiveSequenceId(e) {
            console.log("receiveSequenceId")
            //URLのXXXXXXXを貴社の企業IDに置き換えてご利用ください。
            document.getElementById("sequenceId").innerHTML = "https://XXXXXXX.miitel.jp/app/call/" + e.sequenceId;
        }

        // ダイヤル開始イベント
        function dialBegin(e) {
            console.log("dialBegin");
        }

        // コール開始イベント
        function callBegin(e) {
            console.log("callBegin");
        }

        // コール終了イベント
        function callEnd(e) {
            console.log("callEnd");
        }

        miitelWidget("onReceiveSequenceId", receiveSequenceId);
        miitelWidget("onDialBegin", dialBegin);
        miitelWidget("onCallBegin", callBegin);
        miitelWidget("onCallEnd", callEnd);

    </script>
</body>
</html>
